<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <h2>我是H2标题</h2>
        <ul>
            <li><a data-categoryName="吃饭" data-category1Id='1'>我是一级分类的a标签</a></li>
        </ul>
        <p>么么哒</p>
        <div>
            <p>
                <a data-categoryName="睡觉" data-category2Id='2'>二级分类的a标签</a>
            </p>
            <p>
                <a data-categoryName="打豆豆" data-category3Id='3'>我是三级分类的a标签</a>
                <a data-categoryName="打豆豆" data-category3Id='3'>我是三级分类的a标签</a>
            </p>
        </div>
    </div>
</body>
</html>
<script>
    let box = document.querySelector('#box')

    box.onclick = function (event){
        let targetNode = event.target;
        // /获取节点的自定义属性与属性值 [获取自定义属性的名字都是小写的要注意]
        //dataset:节点标签的一个属性,可以获取节点的自定义属性与属性值【返回的是一个对象】
        //而且还需要注意:对象的K之包含data-后面的东西【都是小写的】

        let {categoryname,category1id,category2id,category3id,}  = targetNode.dataset;
    
        // 判断为a标签
        if(categoryname){
            // 判断是几级分类的a标签
            if(category1id){
                console.log('我是一级分类的a标签')
            }else if(category2id){
                console.log('我是二级分类的a标签')
            }else if(category3id){
                console.log('我是三级分类的a标签')
            }

        }

    }
</script>